import React, { useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react';

// 以下为bpmn工作流绘图工具的样式
import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
import 'bpmn-js-bpmnlint/dist/assets/css/bpmn-js-bpmnlint.css' // bpmnlint

import BpmnViewer from 'bpmn-js/lib/Viewer';
import {getDef, getHighlight} from "../api/workflow";

import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右边工具栏样式

//為右邊屬性
import propertiesPanelModule from 'bpmn-js-properties-panel'
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'

import {Button, Col, Divider, Input, Modal, Row, Space, List, message, Table, Form} from 'antd';
import customTranslateModule from '../BpmnEditor/Modeler/customTranslate';
import './ViewProcInst.css';

export default function ViewProcInst(prop) {
    const modelerRef = useRef(null);
    useEffect(()=>{   //读取外部
        let procId=prop.procId;
        let procInstId=prop.procInstId;
        initBpmn(procId,procInstId);
    },[])

const  initBpmn=(procId,procInstId)=>{
    modelerRef.current =
        new BpmnViewer({
            container:"#canvas",
            additionalModules: [
                customTranslateModule,
            ],
            height:'100vh'
        })

    const logo = document.querySelector('.bjs-powered-by');
    const bpmnContainer = document.querySelector('.bjs-container');
    if (bpmnContainer && logo) {
        bpmnContainer.removeChild(logo);
    }
    renderDiagram(procId,procInstId);
    //setColor2(procInstId)  //不能这样写 因为异步的原因！！！
}

    const renderDiagram = (procId,procInstId) => {
      let xml="<?xml version=\"1.0\" encoding=\"UTF-8\"?>\\n<definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:camunda=\"http://camunda.org/schema/1.0/bpmn\" xmlns:activiti=\"http://activiti.org/bpmn\" xmlns:tns=\"http://www.activiti.org/test\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" id=\"m1605802588480\" name=\"\" targetNamespace=\"http://www.activiti.org/test\">\\n  <process id=\"Process_1\" isExecutable=\"true\">\\n    <startEvent id=\"StartEvent_1y45yut\" name=\"开始\">\\n      <outgoing>Flow_0jfbnmb</outgoing>\\n    </startEvent>\\n    <userTask id=\"Activity_1w1vj9r\" name=\"username1\" activiti:formKey=\"kkk\" activiti:assignee=\"1\" activiti:candidateUsers=\"candidateUsers\" activiti:candidateGroups=\"candidateGroups\">\\n      <extensionElements>\\n        <activiti:formData>\\n          <activiti:formProperty id=\"formProperty_3slq4mu\" />\\n        </activiti:formData>\\n        <activiti:properties>\\n          <activiti:property />\\n        </activiti:properties>\\n      </extensionElements>\\n      <incoming>Flow_0jfbnmb</incoming>\\n      <outgoing>Flow_1nolku9</outgoing>\\n    </userTask>\\n    <sequenceFlow id=\"Flow_0jfbnmb\" sourceRef=\"StartEvent_1y45yut\" targetRef=\"Activity_1w1vj9r\" />\\n    <endEvent id=\"Event_0ahqy2x\" name=\"e\">\\n      <incoming>Flow_1nolku9</incoming>\\n    </endEvent>\\n    <sequenceFlow id=\"Flow_1nolku9\" sourceRef=\"Activity_1w1vj9r\" targetRef=\"Event_0ahqy2x\" />\\n  </process>\\n  <bpmndi:BPMNDiagram id=\"BpmnDiagram_1\">\\n    <bpmndi:BPMNPlane id=\"BpmnPlane_1\" bpmnElement=\"Process_1\">\\n      <bpmndi:BPMNEdge id=\"Flow_0jfbnmb_di\" bpmnElement=\"Flow_0jfbnmb\">\\n        <omgdi:waypoint x=\"188\" y=\"120\" />\\n        <omgdi:waypoint x=\"300\" y=\"120\" />\\n      </bpmndi:BPMNEdge>\\n      <bpmndi:BPMNEdge id=\"Flow_1nolku9_di\" bpmnElement=\"Flow_1nolku9\">\\n        <omgdi:waypoint x=\"400\" y=\"120\" />\\n        <omgdi:waypoint x=\"542\" y=\"120\" />\\n      </bpmndi:BPMNEdge>\\n      <bpmndi:BPMNShape id=\"StartEvent_1y45yut_di\" bpmnElement=\"StartEvent_1y45yut\">\\n        <omgdc:Bounds x=\"152\" y=\"102\" width=\"36\" height=\"36\" />\\n        <bpmndi:BPMNLabel>\\n          <omgdc:Bounds x=\"160\" y=\"145\" width=\"22\" height=\"14\" />\\n        </bpmndi:BPMNLabel>\\n      </bpmndi:BPMNShape>\\n      <bpmndi:BPMNShape id=\"Activity_1w1vj9r_di\" bpmnElement=\"Activity_1w1vj9r\">\\n        <omgdc:Bounds x=\"300\" y=\"80\" width=\"100\" height=\"80\" />\\n      </bpmndi:BPMNShape>\\n      <bpmndi:BPMNShape id=\"Event_0ahqy2x_di\" bpmnElement=\"Event_0ahqy2x\">\\n        <omgdc:Bounds x=\"542\" y=\"102\" width=\"36\" height=\"36\" />\\n        <bpmndi:BPMNLabel>\\n          <omgdc:Bounds x=\"557\" y=\"145\" width=\"7\" height=\"14\" />\\n        </bpmndi:BPMNLabel>\\n      </bpmndi:BPMNShape>\\n    </bpmndi:BPMNPlane>\\n  </bpmndi:BPMNDiagram>\\n</definitions>\n";
       // let xml = getDefaultXml();
        getDef(procId).then(
            (res) => {
                 xml=res.data;
                    console.log("======xmlxmlxml======:"+xml);
                    modelerRef.current.importXML(xml, (err) => {
                    if (err) {
                        Modal.error({ title: 'XML解析失败' });
                        return false;
                    }
                        setColor2(procInstId)
                    return true;
                });
            },
            (error) => {
                console.log("get response failed!");
            }
        );
    };

    const setColor2=(procInstId)=> {
        //debugger;
        // access viewer components
        const canvas = modelerRef.current.get('canvas');
        // 获取到全部节点
        const allShapes = modelerRef.current.get('elementRegistry').getAll();
        //获取高亮的shapeId
        getHighlight(procInstId).then((res) => {
            //debugger;
            const { highPoint } = res.data;

            //循环节点添加颜色
            allShapes.forEach(element => {
                const shapeId = element.businessObject.id;
                if (element.businessObject.$type == 'bpmn:UserTask') {
                    highPoint.forEach(utid => {
                        if (shapeId == utid) {
                            console.log("===========utid======:"+utid+"=====shapeId:======="+shapeId)
                            canvas.addMarker(shapeId, 'highlight');
                        }
                    });
                }
            });
        });
    }

    const container = {
        width: "100%",
        height:"100%"
    };
    const bpmnDesignClass = {
        minHeight: "100vh",
    };

return(
    <>
            <div id="canvas" className={container}>
            </div>
    </>
)
}


